import React, { useState } from 'react';
import { Typography } from 'antd';
import { withRouter } from 'umi';
import TopBanner from '../components/TopBanner';
import { ResetForm, SendMailResult, SetNewPassword, TimeoutResult, SuccessResult } from './components';
import styles from './index.less';

const { Title } = Typography;

// 重置密码
const ResetPasswordPc = ({ location }) => {
    const { step = 1, name, email, verificationKey, verificationValue, id: redirectId } = location?.query;
    const [isLinkTimeout, setIsLinkTimeout] = useState();

    const stepMaps = {
        1: { title: '重置密码', component: <ResetForm name={name} email={email} redirectId={redirectId} /> },
        2: { title: '前往邮箱验证', component: <SendMailResult name={name} email={email} redirectId={redirectId} /> },
        3: {
            title: '设置新密码',
            component: (
                <SetNewPassword
                    verificationKey={verificationKey}
                    verificationValue={verificationValue}
                    setIsLinkTimeout={setIsLinkTimeout}
                    name={name}
                    email={email}
                    redirectId={redirectId}
                />
            )
        },
        4: {
            title: '完成设置',
            component: <SuccessResult redirectId={redirectId} />
        }
    };

    const { title, component } = stepMaps[step] || {};

    return (
        <>
            <div className={styles.resetPasswordWrap}>
                {isLinkTimeout ? (
                    <TimeoutResult />
                ) : (
                    <>
                        <TopBanner employeeName={name ? <b>{name}</b> : '请按如下操作重置密码'} space={370} />
                        <div className={styles.contentWrap}>
                            <div className={styles.content}>
                                <Title level={3} style={{ marginBottom: 46 }}>
                                    {title}
                                </Title>
                                {component}
                            </div>
                        </div>
                    </>
                )}
            </div>
        </>
    );
};

export default withRouter(ResetPasswordPc);
